<template>
  <div>
    <GetBack :titles="'忘记密码'"/>
    <div class="register">
      <van-form class="loginto" @submit="onSubmit" validate-first>
        <van-field
            v-model="accountNumber"
            name="账号"
            label="账号*"
            placeholder="请填写账号"
            :rules="[{ required: true }]"
        />
        <div class="verificabig">
          <van-field
              v-model="modelNumber"
              name="pattern"
              label="手机号*"
              placeholder="请填写手机号"
              :rules="[{ pattern }]"
          />
          <van-button :disabled="isverification" @click.prevent="verificaNumber" class="verifica" type="primary"
                      size="mini">
            {{ isverification ? surplusTime : "发送验证码" }}
          </van-button>
        </div>
        <van-field
            v-model="verification"
            name="验证码"
            label="验证码*"
            placeholder="请填写验证码"
            :rules="[{ required: true }]"
        />

        <van-field
            v-model="passwordOne"
            type="password"
            name="密码"
            label="密码*"
            placeholder="请填写密码"
            :rules="[{ required: true }]"
        />
        <van-field
            v-model="passwordTwo"
            type="password"
            name="确认密码"
            label="确认密码*"
            placeholder="请再次确认密码"
            :rules="[{ required: true}]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>

      </van-form>
    </div>
  </div>
</template>
<script>
import {getForgetThePassword, getMobile} from "@/api/index.api";
import Vue from 'vue';
import {Toast} from 'vant';
import GetBack from "@/components/GetBack";

Vue.use(Toast);
export default {
  name: "Register",
  data() {
    return {
      accountNumber: "",//账号
      modelNumber: "",//手机号
      pattern: /\d{11}/,
      verification: "",//验证码
      isverification: false,//是否请求验证码
      passwordOne: '',//密码
      passwordTwo: "",
      surplusTime: 6,//验证码剩余时间
      isSkip: false,
      toSubmit: false,
    };
  },
  methods: {
    //提交注册
    onSubmit(values) {
      if (this.toSubmit) {
        if (this.passwordOne === this.passwordTwo) {
          this.getForgetThePassword()
        } else {
          Toast.fail({
            message: '请正确输入',
            position: 'top',
          });
        }
        console.log('submit', values);
      }else {
        Toast.fail({
          message:"验证码错误",
          position: 'top',
        })
      }
    },
    //发送验证码
    verificaNumber() {
      if (!this.modelNumber.match(this.pattern)) {
        Toast.fail({
          message: '请正确输入手机号',
          position: 'top',
        });
      } else {
        this.isverification = !this.isverification
      }
    },
    //发送验证禁止提交时间
    verificaTime() {
      // 验证码接口
      getMobile(this.modelNumber).then(res => {
        if (res.code === 0) {
          this.toSubmit = true
        } else {
          this.$toast(res.msg)
        }
      })
      var timer = setInterval(() => {
        this.surplusTime--;
        if (this.surplusTime < 0) {
          this.surplusTime = 6;
          this.isverification = false
          clearInterval(timer)
        }
      }, 1000)
    },
    //忘记密码
    getForgetThePassword() {
      getForgetThePassword(this.accountNumber, this.passwordOne, this.modelNumber, this.verification).then(res => {
        if (res.code === 0) {
          this.$router.push("/Logining")
        } else {
          this.$toast(res.msg)
        }
      })
    }
  },
  watch: {
    // 提交验证码
    isverification(e) {
      if (e) {
        this.verificaTime()
      }
    }
  },
  components: {
    GetBack,
  }
}
</script>
<style lang="less" scoped>
.loginto {
  padding-top: 60px;

  .verificabig {
    position: relative;

    .verifica {
      position: absolute;
      top: 5px;
      right: 10px;
      height: 80%;
      width: 20%;
    }
  }
}
</style>